<template>
	<view class="van-dropdown-menu">
		<view class="van-dropdown-menu__bar van-dropdown-menu__bar--opened" ref="bar">
			<view class="van-dropdown-menu__item" @click="toggleItem(index,item)" v-for="item,index in list">
				<view class="van-dropdown-menu__title" :class="[{
					'van-dropdown-menu__title--active':activeIndex===index,
					'van-dropdown-menu__title--down':activeIndex===index
				}]" @click="tabHandle(0)">{{item.name}}</view>
			</view>
		</view>
		<view>
			<view class="van-dropdown-item van-dropdown-item--down" v-for="item,index in list" :style="style"
				v-show="item.showWrap">
				<view class="van-overlay" :class="[{
					'mask__visible':item.mask
				}]" @click="close">
				</view>
				<view class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave-active"
					:class="[{
					'content--visible_Y':item.mask
				}]">
					<view style="height: 100px;">
						<view class="zb-cell zb-cell--clickable zb-dropdown-item__option">
              <view class="zb-cell__title">
                <text>{{item.name}}</text>
              </view>
              <view class="zb-cell__value">
                <text class="iconfont icon-duihao"></text>
              </view>
            </view>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						name: '全部商品',
						mask: false,
						showWrap: false

					},
					{
						name: '默认排序',
						mask: false,
						showWrap: false
					}
				],

				direction: 'down',
				offset: 0,
				style: {
					top: 0
				},
				showMask: true,
				show: false,
				mask: false,
				mask1: false,
				showWrapper: false,
				showWrapper1: false,
				watchTimer: null,
				activeIndex: null,
			}
		},
		mounted() {
			this.updateOffset()
		},
    beforeDestroy() {
      this.watchTimer && clearTimeout(this.watchTimer)
    },
		methods: {
			tabHandle(index) {
			},
			change(param1, param2, status) {
				this[param1] = status
				this.watchTimer && clearTimeout(this.watchTimer)
				this.watchTimer = setTimeout(() => {
					this[param2] = status
					this.$emit('change', status)

				}, status ? 20 : 200)
			},
			close() {
				// this.change('mask','showWrapper',false)
				this.list.forEach((item, i) => {
					item.mask = false


				})
			},
			changeStatus(item, param1, param2, status) {
				item[param1] = status
				this.watchTimer && clearTimeout(this.watchTimer)
				this.watchTimer = setTimeout(() => {
					item[param2] = status
				}, status ? 20 : 200)
			},
			toggleItem(index) {
				for (let i = 0; i < this.list.length; i++) {
					let item = this.list[i]
					if (i === index) {
						if (!item.showWrap) {
							this.changeStatus(item, 'showWrap', 'mask', true)
						} else {
							this.changeStatus(item, 'mask', 'showWrap', false)
						}
					} else {
						item.mask = false
						item.showWrap = false
					}
				}
				this.activeIndex = index
				this.updateOffset()
			},
			updateOffset() {
				if (!this.$refs.bar) {
					return;
				}
				let query = uni.createSelectorQuery().in(this);
				query.select('.van-dropdown-menu__bar').boundingClientRect(); //我找的idimgBox 你的替换就行
				query.exec(res => {
					if (this.direction === 'down') {
						this.offset = res[0].height + uni.getSystemInfoSync().windowTop;
						this.style.top = `${this.offset}px`;
					} else {
						this.offset = uni.getSystemInfoSync().screenHeight - res[0].top;
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	// @animation-duration-base: 0.3s;
	// @animation-duration-fast: 0.2s;
	// @animation-timing-function-enter: ease-out;
	// @animation-timing-function-leave: ease-in;
	.van-dropdown-menu {
		-webkit-user-select: none;
		user-select: none;
		width: 100%;
	}


	.van-popup {

		&-slide-top-leave-active,
		&-slide-left-leave-active,
		&-slide-right-leave-active,
		&-slide-bottom-leave-active {
			transition-timing-function: ease-in;
		}
	}


	.van-popup-slide-top-enter,
	.van-popup-slide-top-leave-active {
		transform: translate3d(0, -100%, 0);
	}

	.van-popup-slide-right-enter,
	.van-popup-slide-right-leave-active {
		transform: translate3d(100%, -50%, 0);
	}

	.van-popup-slide-bottom-enter,
	.van-popup-slide-bottom-leave-active {
		transform: translate3d(0, 100%, 0);
	}

	.van-dropdown-menu__bar {
		position: relative;
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		height: 48px;
		background-color: #fff;
		box-shadow: 0 2px 12px #6465661f;
	}

	.van-dropdown-menu__item {
		display: flex;
		flex: 1;
		-webkit-box-align: center;
		align-items: center;
		-webkit-box-pack: center;
		justify-content: center;
		min-width: 0;
		cursor: pointer;
	}

	.van-dropdown-menu__title {
		position: relative;
		box-sizing: border-box;
		max-width: 100%;
		padding: 0 8px;
		color: #323233;
		font-size: 15px;
		line-height: 22px;
	}

	.van-dropdown-menu__title::after {
		position: absolute;
		top: 50%;
		right: -4px;
		margin-top: -5px;
		border: 3px solid;
		border-color: transparent transparent #dcdee0 #dcdee0;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
		opacity: 0.8;
		content: '';
	}

	.van-dropdown-menu__title--down::after {
		margin-top: -1px;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);

	}

	.van-dropdown-menu__title--active::after {
		border-color: transparent transparent currentColor currentColor;
	}

	.van-dropdown-menu__bar--opened {
		z-index: 11;
	}

	.van-dropdown-menu__title--active {
		color: #ee0a24;
	}

	.van-dropdown-item {
		position: fixed;
		right: 0;
		left: 0;
		z-index: 10;

		overflow: hidden;
	}

	.van-dropdown-item--down {
		bottom: 0;
	}

	.van-overlay {
		z-index: 2003;
		position: absolute;
		animation-duration: 0.2s;
		top: 0;
		left: 0;
		z-index: 1;
		width: 100%;
		height: 100%;
		opacity: 0;
		background-color: rgba(0, 0, 0, 0.7);
		transition: opacity 0.3s;
	}

	.mask__visible {
		opacity: 1;
	}

	.van-popup {
		position: fixed;
		max-height: 100%;
		overflow-y: auto;
		background-color: #fff;
		-webkit-transition: -webkit-transform 0.2s;
		transition: -webkit-transform 0.2s;
		transition: transform 0.2s;
		transition: transform 0.2s, -webkit-transform 0.2s;
		-webkit-overflow-scrolling: touch;
	}

	.van-dropdown-item__content {
		position: absolute;
		max-height: 80%;
		transition-duration: 0.2s;
		z-index: 2006;
	}

	.van-popup--top {
		top: 0;
		left: 0;
		width: 100%;
	}

	.content--visible_Y {
		transform: translateY(0px);
	}


	@keyframes van-fade-in {
		from {
			opacity: 0;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes van-fade-out {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}

	.van-fade {
		&-enter-active {
			animation: 0.2s van-fade-in both ease-out;
		}

		&-leave-active {
			animation: 0.2s van-fade-out both ease-in;
		}
	}


  .zb-cell{
    position: relative;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 10px 16px;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    align-items: center;
    line-height: 24px;
    background-color: #fff;
  }
  .zb-cell::after {
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 16px;
    bottom: 0;
    left: 16px;
    border-bottom: 1px solid #ebedf0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }
  .zb-cell--clickable{
    cursor: pointer;
  }


  @font-face {
    font-family: "iconfont"; /* Project id 3711565 */
    src:
        url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAJ0AAsAAAAABiwAAAIqAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACCcAooRgE2AiQDCAsGAAQgBYRnBzAbggXIrrApw71IoCYMFA7zwg8FpwSIh//2a/fNnxXFNKlm0SyaaJYoYSsJQqJ0UrcOmUPc/Z+2G0vd+VMRqtMdYw3bmbT7/5emDL2VRVgUDiFxWIyiVpkbW96eX2X9dryc+m6f/lTOAgrwA7GsfRdK96BF0/qBWi9QALuHtVTCXs+LXIXhVQe5E88I1G1Y1TvePb7uTJ8CqTtzA/Z4kDXHU5YEnYmUlmVaqwpldG8Wr0qk5xQv0efj11ZMSEoFu+3scSfufJ2zoOh0OxQfOvP10McSSiiwoiMTV93lE33RxPfVg4Ep2pkFP7rdwBe79oT419mNTTBJK8EPb6kACW6LNtwY9SBRvqOrm+TinWt8/sfn7NN08ZbovwqOnx96s+2/aiOD7zxyMyxKdbUg+AfGLUjMRoaUmwRpNCnvVq07ObrseL/fsfbAueqhamBEtGIiQ6FqisrcEkoatlBWtYO6ZTuHGwZofZFrmPNEEHp9IGl7R6HXN5W5H5QM+0NZr3/U3UTrvIa5iLYYA8EYwkfIIlWTa0kU9hKTtgy4rnCL3GQ0B7ZhlWt7WCNPsaG5SxwRAmJVwa7wGJalAs0qx0iMVEQvTJOa3mJEqupsYSggUAyEHoFMRKlRQJbi911CiVYpwCB1W2aNjIYHNoMFUHt6DQ3cySuNOwmHEAQQplTArjQLlUoK0M2zcigiDOmIorZgOiRCdWN9s/q0E1BnOymcaYXyfZulgep0AA==') format('woff2')
  }

  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .icon-duihao:before {
    content: "\eaf1";
  }
  .zb-cell__title, .zb-cell__value{
    flex: 1;
  }

  .zb-cell__value{
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

</style>
